import React, { useState, useEffect } from 'react';
import { Form, Divider, Input } from 'antd';
import { useTranslation } from 'react-i18next';
import styled from '@emotion/styled';
import VariableOption from './VariableOption';
import { useCardCollect } from '../Context/CardCollectContext';

interface CardVariableProps {
	cardType?: string;
}

const TitleText = styled.p`
	font-size: 14px;
	font-weight: bold;
	color: #202020;
	margin: 6px 0;
`;
const OptionWrapper = styled.div`
	padding: 0 0 0 20px;
	.ant-form-item {
		margin-bottom: 10px;
	}
	.ant-form-item-label {
		width: 100px;
	}
`;

const CardVariable = (props: CardVariableProps) => {
	const { t } = useTranslation();
	const { cardType } = props;
	const { setIdCardFront, setIdCardBack, setBankCard, idCardFront, idCardBack, bankCard } = useCardCollect();

	useEffect(() => {
		let list = idCardFront().map(item => {
			item.parameterName = '';
			return item;
		});
		setIdCardFront(list);
		list = idCardBack().map(item => {
			item.parameterName = '';
			return item;
		});
		setIdCardBack(list);
		list = bankCard().map(item => {
			item.parameterName = '';
			return item;
		});
		setBankCard(list);
	}, [cardType]);

	const handleIdCardFrontVariableChange = (value: string, index: number) => {
		const list = [...idCardFront()];
		list[index].parameterName = value;
		setIdCardFront(list);
	};

	const handleIdCardBackVariableChange = (value: string, index: number) => {
		const list = [...idCardBack()];
		list[index].parameterName = value;
		setIdCardBack(list);
	};

	const handleBankCardVariableChange = (value: string, index: number) => {
		const list = [...bankCard()];
		list[index].parameterName = value;
		setBankCard(list);
	};

	return (
		<div className="id-card-variable-contanier">
			{cardType === 'idCard' && (
				<>
					<div className="front-wrapper">
						<TitleText>身份证正面</TitleText>
						<OptionWrapper>
							{idCardFront().map((item: any, index: number) => {
								return (
									<Form.Item label={item.name} key={index}>
										<VariableOption parameterName={item.parameterName} index={index} cardType={cardType} onVariableChange={handleIdCardFrontVariableChange} />
									</Form.Item>
								);
							})}
						</OptionWrapper>
					</div>
					<div className="back-wrapper">
						<TitleText>身份证背面</TitleText>
						<OptionWrapper>
							{idCardBack().map((item, index) => {
								return (
									<Form.Item label={item.name} key={index}>
										<VariableOption parameterName={item.parameterName} index={index} cardType={cardType} onVariableChange={handleIdCardBackVariableChange} />
									</Form.Item>
								);
							})}
						</OptionWrapper>
					</div>
				</>
			)}
			{cardType === 'bankCard' && (
				<div className="back-wrapper">
					<TitleText>银行卡</TitleText>
					<OptionWrapper>
						{bankCard().map((item, index) => {
							return (
								<Form.Item label={item.name} key={index}>
									<VariableOption parameterName={item.parameterName} index={index} cardType={cardType} onVariableChange={handleBankCardVariableChange} />
								</Form.Item>
							);
						})}
					</OptionWrapper>
				</div>
			)}
		</div>
	);
};

export default CardVariable;
